
// 导入数据页面


import React, { useState } from "react";
import { Button, Form, Input, message, Modal, Radio } from "antd";
import url from "../../../config/url";
import req from "../../../http/req";

const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="请输入您的信息!"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            onCreate(values);
          })
          .catch((info) => {
            // console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: "public",
        }}
      >
        <Form.Item
          name="username"
          label="用户名:"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: "Please input the title of collection!",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="mobile" label="手机号:">
          <Input type="textarea" />
        </Form.Item>
        <Form.Item name="email" label="邮箱:">
          <Input type="youxian" />
        </Form.Item>
        <Form.Item
          name="gender"
          className="collection-create-form_last-form-item"
        >
          <Radio.Group name="gender">
            <Radio value="1">男</Radio>
            <Radio value="2">女</Radio>
            <Radio value="3">保密</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

const AntDesign = () => {
  const [visible, setVisible] = useState(false);

  const onCreate = (values) => {
    // console.log(values);
    //   console.log(values.mobile-0);
    //   console.log(values.gender-0);
      values.mobile=values.mobile-0
      values.gender=values.gender-0

      req.post(url.PostUserAdd,values).then(res=>{
        // console.log(res); 
        if(res.data.errNo===0){
       message.success('导入成功',3, )
      }else{
        message.error('导入失败',3, )      
      }
      })
     

    setVisible(false);
  };

  return (
    <>
      <Button
        style={{
          float: "right",
          marginRight: "30px",
          borderRadius: "8px",
        }}
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        导入
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </>
  );
};

export default AntDesign;
